<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<table>
    <tbody>
    <tr>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
    </tr>
    <tr>
        <td>价格</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>库存</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>数量</td>
        <td><button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" id="one-down">减少
        </button><button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn"id="one-top">增加
        </button></td>
        <td><button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" id="two-down">减少
        </button><button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" id="two-top">增加
        </button></td>
        <td><button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" id="three-down">减少
        </button><button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" id="three-top">增加
        </button></td>
        <td><button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" id="four-down">减少
        </button><button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" id="four-top">增加
        </button></td>
        <td><button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" id="five-down">减少
        </button><button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn"id="five-top">增加
        </button></td>
    </tr>
    </tbody>
    <!--  <button id="eidt" style="width: 100px;height: 100px" >修改</button>-->
</table>
<button id="past">确仁药品</button>
<button id="set">提交</button>
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
    const http = localStorage.getItem('http')
    $.ajax({
        method:'GET',
        url:http+`/Potions/list`,
        async:false,
        success:function (data,status){
            shuju = data.data
        }
    })
    medicine={
        Name:[],
        Price:[],
        Quantity:[],
        Num:[]
    }
    for (let i=0 ; i<shuju.length;i++)
    {
        let  tex = shuju[i]
        console.log(typeof (tex))
        medicine.Name.push(tex["potionName"])
        medicine.Price.push(tex["potionPrice"])
        medicine.Quantity.push(tex["potionQuantity"])
    }
    let n =-1;
    let j=0;
    var table = $("table")
    table.find("tr").each(function (){
        table.find("th").each(function (){

            const name =medicine.Name
            $(this).text(name[n])

            n++
        })
        if (j==1)
        {
            console.log("dsfadfas")
            var m = -1
            $(this).find("td").each(function (){
                const tee = medicine["Price"]
                    $(this).text(tee[m])
                m++
            })
        }else if (j==2)
        {
            var m = -1
            $(this).find("td").each(function (){
                const tee = medicine["Quantity"]
                    $(this).text(tee[m])
                m++
            })
        }
    j++
    })

    var one=0
    var two=0
    var three=0
    var four=0
    var five=0
    $("#one-down").on('click',function ()
    {
        one--
    })
    $("#one-top").on('click',function ()
    {
        one++
    })
    $("#two-down").on('click',function ()
    {
        two--
    })
    $("#two-top").on('click',function ()
    {
        two++
    })
    $("#three-down").on('click',function ()
    {
        three--
    })
    $("#three-top").on('click',function ()
    {
        three++
    })
    $("#four-down").on('click',function ()
    {
        four--
    })
    $("#four-down").on('click',function ()
    {
        four++
    })
    $("#five-down").on('click',function ()
    {
        five--
    })
    $("#five-top").on('click',function ()
    {
        five++
    })
    $("#past").on('click',function (){
        medicine.Num.push(one)
        medicine.Num.push(two)
        medicine.Num.push(three)
        medicine.Num.push(four)
        medicine.Num.push(five)
        console.log(medicine)
        var index = layer.open({
            title: '编辑用户',
            type: 2,
            shade: 0.2,
            maxmin:true,
            shadeClose: true,
            area: ['100%', '100%'],
            content: './yao-table.html',
        });
    })
    $("#set").on('click',function (){
        const http = localStorage.getItem('http')
        var index = parent.layer.getFrameIndex(window.name)
        let model = {
            medicineId:'',
            medicineName:'',
            medicineNum:'',
            medicinePrice:'',
            medicineQuantity:''
        }
        medicine.Num.push(one)
        medicine.Num.push(two)
        medicine.Num.push(three)
        medicine.Num.push(four)
        medicine.Num.push(five)
        for ( let i = 0; i<medicine.Name.length;i++)
        {
            model.medicineId = i+1
            model.medicineName = medicine.Name[i]
            model.medicineNum = medicine.Num[i]
            model.medicinePrice = medicine.Price[i]
            model.medicineQuantity = medicine.Quantity[i]
            console.log(JSON.stringify(model))
            $.ajax({
                method: "POST",
                url: http+`/Medicines/save`,
                data:JSON.stringify(model),
                async:false,
                dataType: "json",
                contentType: "application/json"
            })
        }
        parent.layer.close(index)
    })
</script>
<style>
    table {
        width: 100vw;
        height: 100vh;
        border-collapse: collapse;
        border: 2px solid rgb(140 140 140);
        font-family: sans-serif;
        font-size: 0.8rem;
        letter-spacing: 1px;
    }

    caption {
        caption-side: bottom;
        padding: 10px;
        font-weight: bold;
    }

    thead,
    tfoot {
        background-color: rgb(228 240 245);
    }

    th,
    td {
        border: 1px solid rgb(160 160 160);
        padding: 8px 10px;
    }

    td:last-of-type {
        text-align: center;
    }

</style>
</body>
</html>
